<template>
  <div class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" size="small">
        <el-form-item label="订单号">
          <el-input v-model="filters.orderSn" placeholder="订单号" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="filters.orderStatus" placeholder="订单状态" clearable>
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="录单人">
          <el-input v-model="filters.opName" placeholder="录单人" />
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="filters.contractType" placeholder="订单类型" clearable>
            <el-option v-for="item in contractTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="filters.date" type="daterange" align="right" unlink-panels range-separator="至" 
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
          <el-button type="success" icon="el-icon-download" @click="handleExport">导出对账单</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table v-loading="loading" :data="data" highlight-current-row fit="fit">
      <el-table-column type="index" label="序号" min-width="55">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderSn" label="订单号" min-width="140">
        <template slot-scope="scope">
          <router-link :to="`/finance/order/detail/${scope.row.orderSn}`">
            <el-button type="text">{{ scope.row.orderSn }}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="merchantStudentName" label="学员姓名" />
      <el-table-column prop="amount" label="订单金额（元）"/>
      <el-table-column prop="contractTypeName" label="签约类型" min-width="80"/>
      <el-table-column prop="opName" label="录单人" min-width="80"/>
      <el-table-column prop="chargeTypeName" label="支付方式" min-width="80"/>
      <el-table-column prop="chargeTime" label="支付时间" min-width="140">
        <div slot-scope="order">
          {{ order.row.chargeTime | formatDate('yyyy-MM-dd hh:mm') }}
        </div>
      </el-table-column>
      <el-table-column prop="payOrderNo" label="支付单号" min-width="140"/>
      <el-table-column prop="orderStatusName" label="订单状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 1" type="info">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 2" type="warning">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 9" type="warning">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 10" type="danger">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else type="success">{{ scope.row.orderStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditStatusName" label="审批状态"/>
      <el-table-column prop="auditOpName" label="审单人"/>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <router-link :to="`/finance/order/detail/${scope.row.orderSn}`">
            <el-button type="text">详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'

export default {
  name: 'OrderList',
  mixins: [initData],
  data() {
    return {
      orderSn: null,
      filters: {
        orderSn: '',
        orderStatus: ''
      },
      // 前台查询的状态列表
      statusList: this.$store.getters.orderStatusList,
      contractTypes: this.$store.getters.orderContractTypes,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.params = {
        orderSn: this.filters.orderSn,
        status: this.filters.orderStatus,
        page: this.page,
        size: this.size
      }
      if (this.filters.date != '' && this.filters.date != null) {
        this.params.date = this.filters.date.join(',')
      }
      this.url = 'order/list'
      return true
    },
    // 子窗口信息审核成功
    auditSuccess(val) {
      if (val === true) {
        this.init()
      }
    },
    handleExport: function() {
      
    }
  }
}
</script>
<style lang="css" scoped>
</style>
